ComponentOne CandlestickChart for ASP.NET Web Forms
Candlestick Chart Types / Creating a High-Low-Open-Close Chart
In This Topic
    Creating a High-Low-Open-Close Chart
    In This Topic

    There are two ways to create a High-Low-Open-Close chart: at design time or in Source View. This topic assumes that you have added the appropriate references and a C1CandlestickChart control to your new application.

     

    At Design Time

    1. Select the C1CandlestickChart control to open the control's Properties window.
    2. Locate the Type property in the Appearance properties.
    3. Use the drop-down arrow to select "Ohlc" from the list. 
    4. Add SeriesList data as in Step 2 of the Quick Start. For a High-Low-Open-Close chart, you need High, Low, Open, Close and X values.
    5. Customize your chart using the ChartStyle options.
    6. Run your application.

    In Source View

    The following markup can be used to create and customize a High-Low-Open-Close chart in Source View. Note that the color and width of the chart elements has been set:

    Markup
    Copy Code 
    <cc1:C1CandlestickChart ID="C1CandlestickChart1" runat="server" Type="Ohlc">
    <CandlestickChartSeriesStyles>
        <cc1:CandlestickChartStyle>
            <HighLow Width="3">
                <Fill Color="#0033CC">
                </Fill>
            </HighLow>                   
        </cc1CandlestickChartStyle>
    </CandlestickChartSeriesStyles>
    <SeriesList>
        <cc1:CandlestickChartSeries LegendEntry="True" Label="Values">
            <Data>
                <High DoubleValues="10, 12, 11, 14, 16, 20, 18, 17" />
                <Low DoubleValues="7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10" />
                <Open DoubleValues="8,8.6,11,6.2,13.8,15,14,12"></Open>
                <Close DoubleValues="8.6,11,6.2,13.8,15,14,12,10"></Close>
                <X>
                    <Values>
                        <cc1:ChartXData DateTimeValue="2014-03-07" />
                        <cc1:ChartXData DateTimeValue="2014-03-08" />
                        <cc1:ChartXData DateTimeValue="2014-03-09" />
                        <cc1:ChartXData DateTimeValue="2014-03-10" />
                        <cc1:ChartXData DateTimeValue="2014-03-11" />
                        <cc1:ChartXData DateTimeValue="2014-03-12" />
                        <cc1:ChartXData DateTimeValue="2014-03-13" />
                        <cc1:ChartXData DateTimeValue="2014-03-14" />
                    </Values>
                </X>
            </Data>
        </cc1CandlestickChartSeries>
    </SeriesList>           
</cc1C1CandlestickChart>

     

    See Also
    Candlestick Chart Elements